<template lang="">
    <div class="newDetail">
        <div class="mui-card">
			<div class="mui-card-header mui-card-media">
				<img :src="newBody.images.small" referrerpolicy="never" />
				<div class="mui-media-body">
					{{newBody.title}}
					<p>Pubdate: {{newBody.pubdate}}</p>
				</div>
			</div>
			<div class="mui-card-content">
                <div class="mui-card-content-inner">
					{{newBody.summary}}
				</div>
				<img :src="newBody.images.large" alt="" referrerpolicy="never" width="180px" style="margin:0 auto;display:block;"/>
			</div>
			<div class="mui-card-footer">
				<a class="mui-card-link">Like</a>
				<a class="mui-card-link" @click="toggleTab(userComment)">Comment</a>
                <a class="mui-card-link" @click="toggleTab(userReview)">Review</a>
				<a class="mui-card-link">Read more</a>
			</div>
		</div>
        <!-- 评论区域 子组件 -->
        <transition>
            <keep-alive>
                <component :is="componentId" :typeId="typeId"></component>
            </keep-alive>
        </transition>
        <!-- <user-comment :typeId="typeId"></user-comment> -->
    </div>
</template>

<script>
import comment from '../subcomponents/comment.vue';
import review from '../subcomponents/review.vue';
import {Toast} from 'mint-ui';
import '../../CSS/toggleTransition.css';

export default {
    data () {
        return {
           newBody: [],
           id: this.$route.params.id,
           urlInfo: "",
           typeId: {
             id : this.$route.params.id,
             type : this.$route.params.type,
           },
           userReview: 'user-review',
           userComment : 'user-comment',
           componentId : 'user-comment'
        }
    },
    created () {
        this.getPathInfo ();
        this.getNewDetail ();
    },
    methods: {

        getPathInfo () {
           console.log(this.$route)
           let routeInfo  = this.$route.params.type;
           if (routeInfo === "movie") {
              this.urlInfo = 'v2/movie/subject/'+ this.id
           } else if (routeInfo === "book") {
              this.urlInfo = 'v2/book/isbn/'+ this.id
           }
        },
        
        getNewDetail () {
            // console.log(selfId)
            this.$http.get(this.urlInfo).then(result => {
                this.newBody = result.body
                console.log("isbn2:"+this.typeId.isbn13)
                console.log(result)
            }).catch(()=>Toast('请求失败'))
        },

        // 切换长短评组件
        toggleTab (indexTable) {
            this.componentId = indexTable;
        }

    },
    components: {
        'user-comment': comment,
        'user-review': review
    }
}
</script>

<style lang="scss" scoped>
    .newDetail {
        margin-bottom: 30px;
    }
</style>